// 执行
<template>
  <div class="bg-color-fffff padding-20 margin-bottom-20">
    <div class="flex align-center justify-between">
      <div class="flex align-center justify-between half-box padding-left-right-40">
        <div>
          <div class="padding-bottom-5">全年预测现金流入</div>
          <div class="font-size-22 font-weight-700">{{ model.incomeCompare.forecastYearAmount | moneyFilterNoUnit }}<span class="font-size-14">万元</span></div>
        </div>
        <div>
          <div class="padding-bottom-5">计划</div>
          <div class="font-size-22 font-weight-700">{{ model.incomeCompare.planAmount | moneyFilterNoUnit }}<span class="font-size-14">万元</span></div>
        </div>
        <div>
          <div class="padding-bottom-5">
            差异值<span :class="model.incomeCompare.forecastDifferenceAmount > 0 ? 'color-green' : 'color-red'">{{ model.incomeCompare.forecastDifferenceAmount }}</span>
          </div>
          <div>
            差异率<span :class="model.incomeCompare.forecastDifferenceRate > 0 ? 'color-green' : 'color-red'">{{ model.incomeCompare.forecastDifferenceRate >= 0 ? '↑' : '↓' }}{{ Math.abs(model.incomeCompare.forecastDifferenceRate) | accMul }}%</span>
          </div>
        </div>
      </div>
      <div class="split-line"></div>
      <div class="flex align-center justify-between half-box padding-left-right-40">
        <div>
          <div class="padding-bottom-5">全年预测支出</div>
          <div class="font-size-22 font-weight-700">{{ model.paymentCompare.forecastYearAmount | moneyFilterNoUnit }}<span class="font-size-14">万元</span></div>
        </div>
        <div>
          <div class="padding-bottom-5">计划</div>
          <div class="font-size-22 font-weight-700">{{ model.paymentCompare.planAmount | moneyFilterNoUnit }}<span class="font-size-14">万元</span></div>
        </div>
        <div>
          <div class="padding-bottom-5">
            差异值<span :class="model.paymentCompare.forecastDifferenceAmount > 0 ? 'color-red' : 'color-green'">{{ model.paymentCompare.forecastDifferenceAmount }}</span>
          </div>
          <div>
            差异率<span :class="model.paymentCompare.forecastDifferenceRate > 0 ? 'color-red' : 'color-green'">{{ model.paymentCompare.forecastDifferenceRate >= 0 ? '↑' : '↓' }}{{ Math.abs(model.paymentCompare.forecastDifferenceRate) | accMul }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { apiCompareTotal } from '@a/about';

  export default {
    props: {
      selectTime: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        model: { paymentCompare: {}, incomeCompare: {} },
      };
    },

    methods: {
      //计划和预测对比
      async getCompareTotal() {
        let projectKey = this.$route.query.projectKey || '';
        let res = await apiCompareTotal({
          projectKeys: projectKey ? [projectKey] : null,
          year: Number(this.selectTime.split('-')[0]) || null,
          month: Number(this.selectTime.split('-')[1]) || null,
        });
        this.model = res;
      },
    },

    mounted() {
      this.getCompareTotal();
    },
  };
</script>

<style lang="scss" scoped>
  .half-box {
    width: 50%;
  }
  .split-line {
    width: 1px;
    background: #e5e5e5;
    height: 45px;
    margin: 0 20px 0;
  }
</style>
